<template>
  <h1>时间选择器组件</h1>
  <div>
    <el-date-picker
      v-model="rq"
      type="datetime"
      placeholder="选择日期时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      format="YYYY-MM-DD HH:mm:ss"
      @change="console.log(rq)"
    >
    </el-date-picker>
    <el-date-picker
        v-model="rq2"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        @change="console.log(rq2)"
    ></el-date-picker>
    <el-date-picker
        v-model="rq3"
        type="datetimerange"
        placeholder="选择日期"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        @change="f"
        start-placeholder="开始啦"
        end-placeholder="结束啦"
        range-separator="至"
    ></el-date-picker>
  </div>
</template>

<script setup>
import {ref} from "vue";

let rq = ref("");
let rq2 = ref("");
let rq3 = ref([]);
let f =()=>{
  console.log(rq3.value);
  console.log(rq3.value[0]);
  console.log(rq3.value[1]);
}

</script>

<style scoped>

</style>